<script lang="ts">
    import { onDestroy } from "svelte";
    import type { TabPaneProps, TabsContextData } from "./Tabs";
    import { useTabsContext } from "./Tabs.svelte";

    const props: TabPaneProps = $props();
    const ctx: TabsContextData = useTabsContext();
    const id = $props.id();
    ctx?.addTabPane({ ...props, id });

    onDestroy(() => {
        ctx?.removeTabPane(props.name);
    });
</script>
